<template >
   <audio :src="obj.music" controls style="display: none" ref="music"></audio>
    <div class="temple-block-box flex-center-col-start">

        <div class="temple-block-image-box flex-center-start"  >
            <y-image :src="obj.image.fishSrc" class="temple-block-image" :class="obj.play?'temple-block-image-active':'temple-block-image-normal'"></y-image>
            <y-image :src="obj.image.stickSrc"
                     class="temple-block-stick-image"
                     :class="obj.play?'temple-block-stick-active':'temple-block-stick-normal'"
                     @click="click"

            >

            </y-image>
            <button class="button2" style="position:absolute;right: 0;top: 50px;font-size: 18px"
                @click="autoPlay"
                    v-text="obj.autoplay?'停止':'全自动敲木鱼'"
            >

            </button>
            <div style="color:tomato"> ⬅️ 点击木鱼棒 | &nbsp 空格键 &nbsp | &nbsp回车键 &nbsp</div>
        </div>
    </div>
</template>

<script>
    import {reactive, ref} from "@vue/reactivity";
    import YImage from "@/components/other/YImage";
    import {onMounted} from "@vue/runtime-core";

    export default {
        name: "TempleBlock",
        components: {YImage},
        setup(){
            let music=ref()
            let obj=reactive({
                autoplay:false,
                play:false,
                image:{
                    fishSrc:"http://www.youlibin.top:8090/image/c1d-80db602886b7-fish.png",
                    stickSrc:"http://www.youlibin.top:8090/image/3f-f5142ef51295-stick.png"
                },
                music:require("/src/assets/video/木鱼敲击声.mp4")
            })

            let autoPlayTask=()=>{
                if(obj.autoplay){
                    play()
                    setTimeout(()=>{
                        stop()
                    },300)
                    setTimeout(()=>{
                        autoPlayTask()
                    },1000)

                }else{

                }
            }
            let autoPlay=()=>{
                obj.autoplay=!obj.autoplay
                autoPlayTask()
            }
            let play=()=>{

                obj.play=true
                music.value.currentTime=0
                music.value.play()
            }
            let stop=()=>{
                obj.play=false

            }
            let click=()=>{
                play()
                setTimeout(()=>{
                    stop()
                },300)
            }

            onMounted(()=>{


                document.onkeydown=()=>{
                    let key = window.event.keyCode;
                    if(key === 32 || key === 13){
                        // 阻止空格键默认事件
                        // window.event.preventDefault()//
                        // event.stopPropagation(); // 这是阻止事件的冒泡方法
                        // event.preventDefault(); // 这是阻止默认事件的方法，但是会发生冒泡，冒泡会传递到上一层的父元素；
                        // return false;    他会同时阻止事件冒泡也会阻止默认事件


                        // 简而言之：return false = event.stopPropagation() + event.preventDefault();

                        play()
                        return false
                    }
                }
                document.onkeyup=stop
            })
            return{
                music,
                obj,
                play,
                stop,
                autoPlay,
                click
            }
        }
    }
</script>

<style scoped lang="less">

    @temple-image-width:500px;
    @temple-image-height:500px;
    .temple-block-box{
        width: 100%;
        min-height: 700px;
        .temple-block-image-box{

            position: relative;
            min-width: @temple-image-width*1.7;
            min-height: @temple-image-height;
            .temple-block-image{

                border-radius: 5px;
                transition: all 0.5s;

            }

            .temple-block-stick-image{

                width: 150px;
                /*transform: rotateZ(-30deg);*/
                position: absolute;
                left:350px;
                top: 100px;
                z-index: 1;
                cursor: pointer;
                transition: all 0.2s;
            }
            .temple-block-stick-image:active{
                /*transform: rotateZ(-60deg);*/
            }

        }
    }
    .temple-block-image-normal{
        width: @temple-image-width;
        height: @temple-image-height;
    }
    .temple-block-image-active{
        width: @temple-image-width*0.95;
        height: @temple-image-height*0.95;
    }
    .temple-block-stick-normal{
        transform: rotateZ(-30deg);
    }
    .temple-block-stick-active{
        transform: rotateZ(-60deg);
    }
</style>